<template>
        <div class="image-box">
            <el-image
                    style="min-width: 30px; min-height: 30px;width: 100%;height: 100%;"
                    :src="imageSrc"
                    :fit="imageFit"
                    :preview-src-list="srcList"

            >
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                    <p>加载失败</p>
                    <i class="el-icon-picture-outline"></i>
                </div>

            </el-image>

        </div>

</template>

<script>
    export default {
        name: "YImage",
        props:{
            src:{
                type:String,
                require:true
            },
            fit:{
                type: String,
                require: false,
                default:"cover"
            },
            preSrcList:{
              type:Array
            }
        },
        data(){
            return{
                imageSrc:this.$props.src,
                imageFit:this.$props.fit,
                srcList: this.$props.preSrcList

            }
        },
        methods:{

        },
        mounted() {

        },
        watch:{
            src(newV){
                console.log(newV)
                this.imageSrc=newV
                this.srcList=[newV]
            },
            fit(newV){
                this.imageUrl=newV
            }
        }
    }
</script>

<style scoped lang="less">
    .image-box{
        overflow: hidden;
    }
</style>